import { useEffect, useState, useRef } from 'react'
import { List, SwipeAction, Toast, Dialog, FloatingBubble } from 'antd-mobile'
import { checkTypes, checkTypeSave } from '@api'
import { AddSquareOutline } from 'antd-mobile-icons'
import './index.scss'
const floatingStyle = {
    '--initial-position-bottom': '20vh',
    '--initial-position-right': '15px',
    '--edge-distance': '15px',
    '--size': '40px'
}

const Meeting = () => {
    const inputRef = useRef()
    const inputRef2 = useRef()

    const [list, setList] = useState([])

    useEffect(() => {
        getData()
    }, [])

    const getData = () => {
        checkTypes({ current: 1, size: 100 }).then(({ data, info, success }) => {
            if (success && data) {
                setList(data)
            } else {
                Toast.show(info)
            }
        })
    }

    const getActions = (item) => {
        return [
            {
                id: item.id,
                text: '修改',
                color: 'warning',
                name: item.name,
                key: item.id
            }
        ]
    }

    const onAction = ({ id, name }) => {
        Dialog.confirm({
            title: '修改类型',
            content: (
                <div className="types_box">
                    <input ref={inputRef} defaultValue={name} placeholder="请输入检查类型名" />
                </div>
            ),
            onConfirm: () => {
                const _name = inputRef.current.value
                if (_name) {
                    checkTypeSave({ id, name: _name }).then(({ info, success }) => {
                        if (success) {
                            Toast.show('操作成功~')
                            getData()
                        } else {
                            Toast.show(info)
                        }
                    })
                } else {
                    Toast.show('类型不能为空~')
                }
            },
            onCancel: () => (inputRef.current.value = '')
        })
    }

    const add = () => {
        Dialog.confirm({
            title: '添加类型',
            content: (
                <div className="types_box">
                    <input ref={inputRef2} defaultValue={name} placeholder="请输入检查类型名" />
                </div>
            ),
            onConfirm: () => {
                const name = inputRef2.current.value
                if (name) {
                    checkTypeSave({ name }).then(({ info, success }) => {
                        if (success) {
                            Toast.show('操作成功~')
                            getData()
                        } else {
                            Toast.show(info)
                        }
                    })
                } else {
                    Toast.show('类型不能为空~')
                }
            },
            onCancel: () => (inputRef2.current.value = '')
        })
    }

    return (
        <div className="Meeting">
            <List>
                {list.map((item) => (
                    <SwipeAction key={item.id} rightActions={getActions(item)} onAction={onAction}>
                        <List.Item description={item.createTime}>
                            <p style={{ fontWeight: 'bold', fontFamily: '黑体' }}>{item.name}</p>
                        </List.Item>
                    </SwipeAction>
                ))}
            </List>
            <FloatingBubble style={floatingStyle} onClick={add}>
                <AddSquareOutline fontSize={25} />
            </FloatingBubble>
        </div>
    )
}
export default Meeting
